<template>
<!--  <div class="card art-custom-card" style="border-radius: calc(var(--custom-radius) + 4px) !important;" > -->
<div class="card art-custom-card" style="height: 52.55rem" >
    <div class="card-header">
	
			
		<svg t="1753945457291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5335" width="3rem" height="3rem">
			 <defs>
			    <!-- 定义线性渐变 -->
			    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
			      <stop offset="0%" style="stop-color:  rgb(255, 112, 102); stop-opacity:1" />
			      <stop offset="100%" style="stop-color: rgb(232, 48, 59) ; stop-opacity:1" />
			    </linearGradient>
			  </defs>
			
			<path
				d="M526.925944 110.523209c-212.498742 0-384.763131 172.264389-384.763131 384.763131s172.264389 384.763131 384.763131 384.763131 384.763131-172.264389 384.763131-384.763131S739.424686 110.523209 526.925944 110.523209zM494.184239 211.852012c7.05672-7.566326 16.136515-11.348466 27.237341-11.348466 13.619182 0 23.454178 4.043083 29.507034 12.105712 6.548136 9.587356 9.574053 21.444405 9.078773 35.55989l-9.834996 341.220429c-1.51347 12.613272-4.799306 21.940708-9.834996 27.993564-6.052856 6.560416-13.121855 9.834996-21.184485 9.834996-7.566326 0-13.879102-3.02694-18.914792-9.078773-5.556553-7.057743-8.073886-16.646122-7.566326-28.750811l-9.078773-341.220429C482.57483 233.036497 486.110353 220.930785 494.184239 211.852012zM563.033303 758.863411c-11.100826 11.088546-24.966625 16.645099-41.611723 16.645099-17.153682-0.50756-31.280424-6.312776-42.36897-17.401322-9.587356-11.609409-14.375405-24.459065-14.375405-38.585807 0.496304-16.137539 5.544273-29.754674 15.131629-40.8555 10.592242-10.593266 24.459065-15.888875 41.612747-15.888875 16.137539 0 29.754674 5.296633 40.856523 15.888875 10.591219 11.608386 15.886829 25.226544 15.886829 40.8555C577.657372 735.161592 572.60838 748.272191 563.033303 758.863411z"
				 fill="url(#gradient)" p-id="5336"></path>
		</svg>
	
			<!--  <i class="iconfont-sys" style="color: rgb(255, 0, 0); font-size:3rem">&#xe719;</i> -->
<!--        <h4 class="box-title" style="  display: flex;justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */ font-size: 2rem;">打卡异常提醒</h4> -->
  
  <h4 class="box-title" style=" font-size: 2rem;">打卡异常提醒</h4>
      <!--  <p class="subtitle">这个月增长<span class="text-success">+20%</span></p> -->
    </div>
  <!-- <el-scrollbar style="height: 20.55rem">
    <ArtTable
		  :data="tableData"
      class="table"
      style="width: 100%"
      size="large"
      :border="false"
      :stripe="false"
      :header-cell-style="{ background: 'transparent' }"
    >
      <template #default>
     
		<el-table-column label="头像" prop="avatar" width="150px">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <img class="avatar" :src="scope.row.avatar" alt="avatar" />
              <span class="user-name">{{ scope.row.username }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="地区" prop="province" />
        <el-table-column label="性别" prop="avatar">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.sex === 1 ? '男' : '女' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="进度" width="240">
          <template #default="scope">
            <el-progress
              :percentage="scope.row.pro"
              :color="scope.row.color"
              :stroke-width="4"
              :aria-label="`${scope.row.username}的完成进度: ${scope.row.pro}%`"
            />
          </template>
        </el-table-column>
      </template>
    </ArtTable>
	  </el-scrollbar>
	  

	  -->
	  
	 <el-scrollbar style="height: 20.55rem; ">
	   <ArtTable
	 		  :data="tableData2"
		     class="table"
	     style="width: 100%;"
	     size="large"
	     :border="false"
	     :stripe="false"
	     :header-cell-style="{ background: 'transparent' }"
		 	
	   >
	     <template #default>
	 			  
	       <el-table-column label="时间" prop="tiem" width="300px">
	         <template #default="scope">
	           <div style="  display: flex; align-items: center">
	             <span class="user-name">{{ scope.row.time }}</span>
	 		       <span class="user-name">{{ scope.row.week }}</span>
	           </div>
	         </template>
	       </el-table-column>
	       <el-table-column label="原因" prop="reason" width="300px" />
	       <el-table-column label="类型" prop="eer">
	         <template #default="scope">
	           <div style="display: flex; align-items: center">
	 					 <img class="avatar" :src="scope.row.avatar" alt="avatar" />
	             <span class="user-name">{{ scope.row.eer}}</span>
	           </div>
	         </template>
	       </el-table-column>
	     </template>
	   </ArtTable>
	 	  </el-scrollbar>
	  
	  	  
	  
	  
	  
	  
	  
	  
	  

	  
	  <div class="card-header">
		  
<svg t="1753947351284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1332"
	width="3rem" height="3rem" >
	<defs>
	   <!-- 定义线性渐变 -->
	   <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
	     <stop offset="0%" style="stop-color:  rgb(0, 234, 109); stop-opacity:1" />
	     <stop offset="100%" style="stop-color: rgb(71, 214, 0) ; stop-opacity:1" />
	   </linearGradient>
	 </defs>
	<path
		d="M526.925944 110.523209c-212.498742 0-384.763131 172.264389-384.763131 384.763131s172.264389 384.763131 384.763131 384.763131 384.763131-172.264389 384.763131-384.763131S739.424686 110.523209 526.925944 110.523209zM485.358223 698.317453c-1.696642 3.266393-3.911076 6.334265-6.652514 9.074679-13.519921 13.519921-34.933627 14.329357-49.403177 2.434445-1.411139-1.052982-2.765997-2.215458-4.047176-3.496637-0.937348-0.937348-1.811252-1.914606-2.626827-2.923586L270.343171 551.120996c-14.384615-14.384615-14.384615-37.705763 0-52.090379s37.705763-14.384615 52.090379 0l129.015376 129.015376 282.793738-282.793738c14.384615-14.384615 37.705763-14.384615 52.090379 0s14.384615 37.705763 0 52.090379L485.358223 698.317453z"
		fill="url(#gradient2)" p-id="1333"></path>
</svg>
	  			 <!-- <i class="iconfont-sys" style="color: rgb(78, 234, 0); font-size:3rem">&#xe617;</i> -->
<!-- 	        <h4 class="box-title" style="  display: flex;justify-content: center; /* 水平居中 */
	  align-items: center;    /* 垂直居中 */font-size: 2rem;">每日打卡记录</h4> -->
	  
	  
	  
	  
	  
	  
	  <h4 class="box-title" style="font-size:2rem;">每日打卡记录</h4>
	    </div>
	  <el-scrollbar style="height: 20.55rem;">
	    <ArtTable
	  		  :data="tableData2"
	      class="table"
	      style="width: 100%"
	      size="large"
	      :border="false"
	      :stripe="false"
	      :header-cell-style="{ background: 'transparent' }"
	    >
	      <template #default>
			  
	        <el-table-column label="时间" prop="tiem" width="300px">
	          <template #default="scope">
	            <div style="display: flex; align-items: center">
	              <span class="user-name">{{ scope.row.time }}</span>
		       <span class="user-name">{{ scope.row.week }}</span>
	            </div>
	          </template>
	        </el-table-column>
	        <el-table-column label="原因" prop="reason" width="300px" />
	        <el-table-column label="类型" prop="eer">
	          <template #default="scope">
	            <div style="display: flex; align-items: center">
					 <img class="avatar" :src="scope.row.avatar" alt="avatar" />
	              <span class="user-name">{{ scope.row.eer}}</span>
	            </div>
	          </template>
	        </el-table-column>
	      </template>
	    </ArtTable>
	  	  </el-scrollbar>
	  
	  
  </div>
  
  
  
</template>

<script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue-demi'
  import avatar1 from '@/assets/img/avatar/avatar1.webp'
  import avatar2 from '@/assets/img/avatar/avatar2.webp'
  import avatar3 from '@/assets/img/avatar/avatar3.webp'
  import avatar4 from '@/assets/img/avatar/avatar4.webp'
  import avatar5 from '@/assets/img/avatar/avatar5.webp'
  import avatar6 from '@/assets/img/avatar/avatar6.webp'

  const radio2 = ref('本月')

  const tableData = reactive([
    {
	  icon:'&#xe719',
      username: '中小鱼',
      province: '北京',
      sex: 0,
      age: 22,
      percentage: 60,
      pro: 0,
      color: 'rgb(var(--art-primary)) !important',
      avatar: avatar1
    },
    {
      username: '何小荷',
      province: '深圳',
      sex: 1,
      age: 21,
      percentage: 20,
      pro: 0,
      color: 'rgb(var(--art-secondary)) !important',
      avatar: avatar2
    },
    {
      username: '誶誶淰',
      province: '上海',
      sex: 1,
      age: 23,
      percentage: 60,
      pro: 0,
      color: 'rgb(var(--art-warning)) !important',
      avatar: avatar3
    },
    {
      username: '发呆草',
      province: '长沙',
      sex: 0,
      age: 28,
      percentage: 50,
      pro: 0,
      color: 'rgb(var(--art-info)) !important',
      avatar: avatar4
    },
    {
      username: '甜筒',
      province: '浙江',
      sex: 1,
      age: 26,
      percentage: 70,
      pro: 0,
      color: 'rgb(var(--art-error)) !important',
      avatar: avatar5
    },
    {
      username: '冷月呆呆',
      province: '湖北',
      sex: 1,
      age: 25,
      percentage: 90,
      pro: 0,
      color: 'rgb(var(--art-success)) !important',
      avatar: avatar6
    },
	{
	  username: '冷月呆呆',
	  province: '湖北',
	  sex: 1,
	  age: 25,
	  percentage: 90,
	  pro: 0,
	  color: 'rgb(var(--art-success)) !important',
	  avatar: avatar6
	},
	{
	  username: '冷月呆呆',
	  province: '湖北',
	  sex: 1,
	  age: 25,
	  percentage: 90,
	  pro: 0,
	  color: 'rgb(var(--art-success)) !important',
	  avatar: avatar6
	},
	{
	  username: '冷月呆呆',
	  province: '湖北',
	  sex: 1,
	  age: 25,
	  percentage: 90,
	  pro: 0,
	  color: 'rgb(var(--art-success)) !important',
	  avatar: avatar6
	},
	{
	  username: '冷月呆呆',
	  province: '湖北',
	  sex: 1,
	  age: 25,
	  percentage: 90,
	  pro: 0,
	  color: 'rgb(var(--art-success)) !important',
	  avatar: avatar6
	},
	{
	  username: '冷月呆呆',
	  province: '湖北',
	  sex: 1,
	  age: 25,
	  percentage: 90,
	  pro: 0,
	  color: 'rgb(var(--art-success)) !important',
	  avatar: avatar6
	}
  ])

  const tableData2 = reactive([
    {
	  icon:'&#xe719',
     time:"12-30",
	 week:"周一",
	 reason:"缺卡",
	 eer:"异常",
	    avatar: avatar1
    },
    {
      icon:'&#xe719',
     time:"12-30",
     week:"周一",
     reason:"缺卡",
     eer:"异常",
	    avatar: avatar2
    },
   {
     icon:'&#xe719',
    time:"12-30",
    week:"周一",
    reason:"缺卡",
    eer:"异常",
	   avatar: avatar3
   },
   {
     icon:'&#xe719',
    time:"12-30",
    week:"周一",
    reason:"缺卡",
    eer:"异常",
	   avatar: avatar4
   },
   
    {
      username: '甜筒',
      province: '浙江',
      sex: 1,
      age: 26,
      percentage: 70,
      pro: 0,
      color: 'rgb(var(--art-error)) !important',
      avatar: avatar5
    },
   

  ])

  onMounted(() => {
    addAnimation()
  })

  const addAnimation = () => {
    setTimeout(() => {
      for (let i = 0; i < tableData.length; i++) {
        let item = tableData[i]
        tableData[i].pro = item.percentage
      }
    }, 100)
  }
</script>

<style lang="scss">
  .card {
    // 进度动画
    .el-progress-bar__inner {
      transition: all 1s !important;
    }

    .el-radio-button__original-radio:checked + .el-radio-button__inner {
      color: var(--el-color-primary) !important;
      background: transparent !important;
    }
  }
</style>

<style lang="scss" scoped>
  .card {
	  
	 //margin-left: 73%;
	 //margin-top: -30rem;
    width: 100%;
    height: 540px;
    overflow: hidden;

    .card-header {
		width: 15rem;
      padding-left: 25px !important;
    }

    :deep(.el-table__body tr:last-child td) {
      border-bottom: none !important;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 6px;
    }

    .user-name {
      margin-left: 10px;
    }
  }
  
 
</style>
